<!DOCTYPE html>
<html>
	<head>
		<title><?php echo lang('site_title');?></title>
		<meta name="viewport" content="initial-scale=1.0">
		<meta charset="utf-8">

		<link type="text/css" href="<?php echo base_url();?>static/css/google_map.css" />

		<script type="text/javascript" src="<?php echo base_url();?>static/js/jquery.js"></script>

		<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $google_ak;?>&callback=googleMap.processor"></script>

		<style type="text/css">

      .mapContainer {
        /*margin-left: 30%;*/
        margin-right: 30%;
        height: 100%;
        width: 70%;
        min-width: 600px;
      }
	  .floating-panel {
	  	float: left;
	  	width: 30%;
	  	width: 176px;
        position: absolute;
        top: 50px;
        left: 10px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
        
      }
      .right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;

		float: right;
        height: 100%;
        height: 400px;
        width: 20%;
        min-width:350px;
        overflow: auto;

        margin: 10px;
        border-width: 2px;
        text-align: left;
        
      }

      .right-panel select, .right-panel input {
        font-size: 15px;
      }

      .right-panel select {
        width: 100%;
      }

      .right-panel i {
        font-size: 12px;
      }

      .bottom-panel {
      	float: left;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;

        height: 20%;
        overflow: auto;

        margin: 10px;
        border-width: 2px;
        width: 20%;
        min-width:300px;
        margin-top: 10px;
    	background-color: #FFEE77;
    	padding: 10px;
        text-align: left;
      }
      

		</style>
	</head>
	<body>
		<h1><?php echo $title; ?></h1>

		<div id="controlPanel" class="left-panel floating-panel">
			<strong>起点:</strong>
			<select id="start">
				<option value="chicago, il">Chicago</option>
				<option value="st louis, mo">St Louis</option>
				<option value="joplin, mo">Joplin, MO</option>
				<option value="oklahoma city, ok">Oklahoma City</option>
				<option value="amarillo, tx">Amarillo</option>
				<option value="gallup, nm">Gallup, NM</option>
				<option value="flagstaff, az">Flagstaff, AZ</option>
				<option value="winona, az">Winona</option>
				<option value="kingman, az">Kingman</option>
				<option value="barstow, ca">Barstow</option>
				<option value="san bernardino, ca">San Bernardino</option>
				<option value="los angeles, ca">Los Angeles</option>
			</select>
			<input id="startInput" value="" />
			<br />
			<strong>终点:</strong>
			<select id="end">
				<option value="chicago, il">Chicago</option>
				<option value="st louis, mo">St Louis</option>
				<option value="joplin, mo">Joplin, MO</option>
				<option value="oklahoma city, ok">Oklahoma City</option>
				<option value="amarillo, tx">Amarillo</option>
				<option value="gallup, nm">Gallup, NM</option>
				<option value="flagstaff, az">Flagstaff, AZ</option>
				<option value="winona, az">Winona</option>
				<option value="kingman, az">Kingman</option>
				<option value="barstow, ca">Barstow</option>
				<option value="san bernardino, ca">San Bernardino</option>
				<option value="los angeles, ca">Los Angeles</option>
			</select>
			<input id="endInput" value="" />
			<br />
			<strong>交通方式: </strong>
			<select id="mode">
				<option value="DRIVING">Driving</option>
				<option value="WALKING">Walking</option>
				<option value="BICYCLING">Bicycling</option>
				<option value="TRANSIT">Transit</option>
			</select>
			<br />
			<strong>Waypoints:</strong>
			<br><i>(Ctrl+Click or Cmd+Click for multiple selection)</i><br>
			<select multiple id="waypoints">
				<option value="montreal, quebec">Montreal, QBC</option>
				<option value="toronto, ont">Toronto, ONT</option>
				<option value="chicago, il">Chicago</option>
				<option value="winnipeg, mb">Winnipeg</option>
				<option value="fargo, nd">Fargo</option>
				<option value="calgary, ab">Calgary</option>
				<option value="spokane, wa">Spokane</option>
			</select>
			<br>
			<input type="submit" id="submit">

		</div>
		
		<!-- 主块不浮动块先放前面，保证在一行放不下的情况下它会最先出现 -->
		<div id="map" class="mapContainer" style="height: 400px;"></div>

		<div id="directionsPanel" class="bottom-panel"></div>

		<div id="panelPanel" class="right-panel"></div>


		<script type="text/javascript">

			var googleMap = {};
			googleMap.mapHandle = null;
			googleMap.container = document.getElementsByClassName("mapContainer")[0];
			googleMap.points = {
				init: {lat: 41.85, lng: -87.65},
				
			};
			googleMap.options = {
				init: {
					center: googleMap.points.init,
					zoom: 7
				},

			};

			googleMap.processor = function() {
				this.init();
				this.initDirections();
				this.initTempControl();//临时起始位置控件
				// this.marker();
				// this.pickerListener();
			};

			googleMap.init = function() {
				this.mapHandle = new google.maps.Map(this.container, this.options.init);
				this.infoWindow = new google.maps.InfoWindow();


				return this;
			};

			googleMap.initDirections = function() {
				// 定义 DirectionsService 和 DirectionsDisplay: DirectionsRenderer
				this.directionsService = new google.maps.DirectionsService;
				this.directionsDisplay = new google.maps.DirectionsRenderer({
					draggable: true,
					// panel: document.getElementById("panelPanel")
				});

				this.directionsDisplay.setMap(this.mapHandle);
				this.directionsDisplay.setPanel(document.getElementById("panelPanel"));

				return this;
			};

			googleMap.initTempControl = function() {
				var control = document.getElementById("controlPanel");
				control.style.display = 'block';
				// this.mapHandle.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
				this.mapHandle.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(control);

				var onChangeHandler = function() {
					calculateAndDisplayRoute(googleMap.directionsService, googleMap.directionsDisplay);
				};

				// document.getElementById('start').addEventListener('change', onChangeHandler);
				// document.getElementById('end').addEventListener('change', onChangeHandler);
				// document.getElementById('mode').addEventListener('change', onChangeHandler);
				document.getElementById("submit").addEventListener("click", onChangeHandler);

				return this;
			};
			var calculateAndDisplayRoute = function calculateAndDisplayRoute(directionsService, directionsDisplay) {
				var start = document.getElementById('startInput').value || document.getElementById('start').value;
				var end = document.getElementById('endInput').value || document.getElementById('end').value;
				var mode = document.getElementById('mode').value;

				var waypoints = [];
				var checkboxArray = document.getElementById("waypoints");
				for (var i = 0; i < checkboxArray.length; i++) {
					if (checkboxArray.options[i].selected) {
						waypoints.push({
							location: checkboxArray[i].value,
							stopover: true
						});
					}
				}
				
				directionsService.route({
					origin: start,
					destination: end,
					waypoints: waypoints,
					optimizeWaypoints: true,
					// travelMode: "DRIVING"
					// Note that Javascript allows us to access the constant
					// using square brackets and a string value as its
					// "property."
					travelMode: google.maps.TravelMode[mode]
				}, function(response, status) {
					if (status === "OK") {
						directionsDisplay.setDirections(response);

						var route = response.routes[0];
						var summaryPanel = document.getElementById("directionsPanel");
						summaryPanel.innerHTML = '';
						// For each route, display summary information.
						for (var i = 0; i < route.legs.length; i++) {
							var routeSegment = i + 1;
							summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
							  '</b><br>';
							summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
							summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
							summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
						}
					} else {
						window.alert('Directions request failed due to ' + status);
					}
				});
			};

			googleMap.createMarker = function(place) {
				var placeLoc = place.geometry.location;
				var marker = new google.maps.Marker({
					map: this.mapHandle,
					position: place.geometry.location
				});
				console.log(place.name);

				google.maps.event.addListener(marker, "click", function() {
					console.log(place);
					googleMap.infoWindow.setContent(place.name);
					googleMap.infoWindow.open(googleMap.mapHandle, this);
				});
			};

			// 反向地理编码（地址查找）
			googleMap.reverseGeoCoding = function(location, callback) {
				var geocoder = new google.maps.Geocoder;

				geocoder.geocode({location: location}, function(results, status) {
					if (status === "OK") {
						if (results[1]) {
							console.log(results);
							address = results[1].formatted_address;
							if (typeof callback === "function") {
								callback(address);
							}
						} else {
							console.log("No results found");
						}
					} else {
						console.log("Geocoder failed due to: " + status);
					}
				});
			};

			


		</script>






	</body>
</html>
